<template>
<div>
<!--  修改密码-->
  <div style="background-color: white;border-radius: 4px;padding: 20px;text-align: left;width: 500px;"    >
    <h3>修改密码</h3>
    <el-form :model="user" label-width="120px">

      <el-form-item label="密码" >
        <el-input type="password" placeholder="默认为123456" v-model="user.password" autocomplete="off" style="width: 260px;"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" style="height: 49px;">
        <el-input type="password" v-model="againPassword" autocomplete="off" @change="checkPassword" style="width: 260px;"></el-input>
        <br/><span v-show="passwordFlag" style="color: #ea0e07;font-size: 70%;margin-top: -5px;">两次输入的密码不匹配</span>
      </el-form-item>
      <el-form-item label="邮箱" prop="email" :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
        <el-input type="email" v-model="user.email" require style="width: 200px;"></el-input>
        <el-button style="width: 60px;" type="success" icon="el-icon-s-promotion" @click="sendPasswordCode(user.email)" :loading="loadingFlag"></el-button>
      </el-form-item>
      <el-form-item label="验证码"  style="height: 49px;">
        <el-input v-model="code" require style="width: 260px;" ></el-input>
        <br/><span v-show="false" style="color: #ea0e07;font-size: 70%;margin-top: -5px;">请输入6位验证码</span>
      </el-form-item>
    </el-form>
    <el-link style="margin-bottom: 20px;" type="primary" title="max_alice@qq.com">邮箱已失效？联系客服</el-link>
      <el-button style="float: right;" type="primary" @click="onSetPassword()">确 定</el-button>
  </div>

<!--  修改邮箱-->
  <div style="background-color: white;border-radius: 4px;padding: 20px;text-align: left;width: 500px;"    >
    <h3>修改邮箱</h3>
    <el-form :model="mail" label-width="120px">

      <el-form-item label="邮箱" prop="oldEmail" :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
        <el-input type="email" v-model="mail.oldEmail" require style="width: 200px;"></el-input>
        <el-button style="width: 60px;" type="success" icon="el-icon-s-promotion" @click="sendPasswordCode(mail.oldEmail)" :loading="loadingFlag"></el-button>
      </el-form-item>
      <el-form-item label="验证码"  style="height: 49px;">
        <el-input v-model="mail.oldCode" require style="width: 260px;" ></el-input>
        <br/><span v-show="false" style="color: #ea0e07;font-size: 70%;margin-top: -5px;">请输入6位验证码</span>
      </el-form-item>
      <el-form-item label="新邮箱" prop="newEmail" :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
        <el-input type="email" v-model="mail.newEmail" require style="width: 200px;"></el-input>
        <el-button style="width: 60px;" type="success" icon="el-icon-s-promotion" @click="sendCode(mail.newEmail)" :loading="loadingFlag"></el-button>
      </el-form-item>
      <el-form-item label="验证码"  style="height: 49px;">
        <el-input v-model="mail.newCode" require style="width: 260px;" ></el-input>
        <br/><span v-show="false" style="color: #ea0e07;font-size: 70%;margin-top: -5px;">请输入6位验证码</span>
      </el-form-item>
    </el-form>
    <el-link style="margin-bottom: 20px;" type="primary" title="max_alice@qq.com">邮箱已失效？联系客服</el-link>
    <el-button style="float: right;" type="primary" @click="onSetEmail()">确 定</el-button>
  </div>
</div>
</template>

<script>
import {sendEmailCode, sendEmailCodePut, setPassword,setEmail} from "@/api/admin";

export default {
  name: "settings",
  data(){
    return{
      mail:{},
      user:{},
      loadingFlag:false,
      passwordFlag:false,  //密码不匹配
      againPassword:"",

      code:null,
    }
  },
  methods:{
    onSetPassword(){ //设置密码
      if(!this.checkCode(this.code)){
        this.$message({type:"warning",message:"请输入六位的验证码"})
        return false;
      }
      setPassword({"password":this.user.password,"code":this.code,"email":this.user.email}).then(res=>{
        if(res.data.success){
          this.$message({type:"success",message:"重置成功"});
        }
      })
    },
    onSetEmail(){ //修改绑定邮箱
      if(!this.checkCode(this.mail.newCode)){
        this.$message({type:"warning",message:"请输入六位的验证码"})
        return false;
      }
      if(!this.checkCode(this.mail.oldCode)){
        this.$message({type:"warning",message:"请输入六位的验证码"})
        return false;
      }
      setEmail(this.mail).then(res=>{
        if(res.data.success){
          this.$message({type:"success",message:"重置成功"});
        }
      })
    },
    checkPassword(){
      // 验证密码
      if(this.againPassword != this.user.password){
        this.passwordFlag = true;
      }else this.passwordFlag = false;
    },
    checkCode(code){
      // 验证密码

      if(code==null||code.length!=6){
        return false;
      }
      return true;
    },
    setLoadingFlag(){
      this.loadingFlag = false;
    },
    sendCode(email){ //发送注册验证码
      this.loadingFlag = true;
      sendEmailCode({"email":email}).then(res=>{
        if(res.data.success){
          this.$message("已发送");
          setTimeout(this.setLoadingFlag,3000);
        }else this.loadingFlag = false;
      },error=>{
        this.loadingFlag = false;
      })
    },

    sendPasswordCode(email){//发送验证验证码
      this.loadingFlag = true;
      sendEmailCodePut({"email":email}).then(res=>{
        if(res.data.success){
          this.$message("已发送");
          setTimeout(this.setLoadingFlag,3000);
        }else this.loadingFlag = false;
      },error=>{
        this.loadingFlag = false;
      })
    },
  }
}
</script>

<style scoped>

</style>
